@import "./theme.scss";

.logo_text{
  background-image: url(/logo.webp);
  background-repeat: no-repeat;
  background-size: auto 90%;
  background-position: left center;
}

.big_input .el-form-item .el-input__wrapper{
  width: 100%;
  height: 48px;
  border-radius: 8px;
  border: 2px solid #e0e0e0;
  padding-left: 16px;
  font-size: 16px;
  color: #5f6388;
  outline: 0;
  transition: all 0.2s ease-in-out;
  box-shadow: none;
  &:hover{
    border: 2px solid rgba(80, 81, 249, 0.8);
  }
  &.is-focus{
    border: 2px solid rgba(80, 81, 249, 1);
    box-shadow: 0 0 0 5px rgba(80, 81, 249, 0.2);
  }
}
.big_input button{
  height: 48px;
  border-radius: 8px;
  border-width: 2px;
  &:focus{
    box-shadow: 0 0 0 5px rgba(80, 81, 249, 0.2);
  }
}
.big_input .is-error .el-input__wrapper{
  box-shadow: none;
  border: 2px solid var(--el-color-danger);
  &:hover{
    box-shadow: none;
    border: 2px solid var(--el-color-danger);
  }
  &.is-focus{
    border: 2px solid rgba(80, 81, 249, 1);
    box-shadow: 0 0 0 5px rgba(80, 81, 249, 0.2);
  }
}

// @media (min-width: $medium-screen-width){
  .logo{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    margin-bottom: 0px;
    color:#5F6388;
    font-weight: 600;
    img{
      height:100%;
    }
  }
  .page{
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    height:100%;
    width: 100vw;
    // background-color: rgba(226, 240, 254);
    // background-image: linear-gradient(to right bottom, rgb(244 245 231), rgb(215, 234, 253));

    .mainpage{
      flex:1;
      height:100%;
      max-width: 100vw;
      display: flex;
      flex-direction: column;
      .header{
        height: 60px;
        display: flex;
        justify-content: space-between;
        // padding:0 24px;
        padding-top: 10px;
        align-items: center;
        padding-right: 24px;
      }
      .navlist{
        display:flex;
        height:100%;
        align-items: center;
        .nav{
          padding:0 16px;
          display: flex;
          align-items: center;
          height:100%;
          color:#5f8880;
          cursor: pointer;
          position: relative;
          p{
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 0px;
            line-height: 19.6px;
            text-align: left;
            vertical-align: top;
            margin-left: 8px;
            transition: all 0.1s ease-in-out;
          }
          .icon{
            font-size: 0;
          }
          &:hover{
            // color: #5762ca;
            color:#308852;
          }
          &.router-link-active{
            background-image: linear-gradient(125deg, #006b2c 20%, #1a842f 88.8%);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            .icon{
              // color: rgba(34, 98, 251, 1);
              color:#006b2c;
            }
          }
          &::after{
            content:"";
            position: absolute;
            display: block;
            bottom:3px;
            z-index: -1;
            left:4px;
            right:4px;
            width:calc(100% - 8px);
            height:44px;
            border-radius: 5px;
            // background: rgba(34, 98, 251, 1);
            // background-image: linear-gradient(105deg, #2263fb15 20%, #801fff15 88.8%);
            background-image: linear-gradient(125deg, #006b2c15 20%, #1a842f15 88.8%);;
            opacity: 0;
            visibility: hidden;
            transition: all 0.1s ease-in-out;
          }
          &.router-link-active::after,&:hover::after{
            opacity: 1;
            visibility: visible;
          }
        }
      }
      .btns{
        display:flex;
        height:100%;
        .btn{
          padding:0 16px;
          display: flex;
          align-items: center;
          height:100%;
          color:#5F6388;
          position: relative;
          cursor: pointer;
        }
        ._user::after{
          content:"";
          position: absolute;
          display: block;
          top:0px;
          bottom:0;
          left:0;
          margin:auto auto;
          right:0;
          width:calc(35px + 8px);
          height:calc(35px + 8px);
          border-radius: calc(35px + 8px);
          border:2px solid rgba(34, 98, 251, 1);
          opacity: 0;
          transition: all 0.1s ease-in-out;
        }
        ._user.router-link-active::after{
          opacity: 1;
        }

      }
      .routerpage{
        flex:1;
        overflow-y: auto;
        scroll-behavior: smooth;
        overflow-x: hidden;
        // display: flex;
      }
      .routerpage>*{
        // animation-duration:100ms;
        // min-height: 100%;
      }
    }
    .tabbar{
      display: flex;
      width: 250px;
      // background-color: rgba(251, 250, 255, 1);
      padding-top:28px;
    }
    .tablist{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding:16px;
      li{
        display: block;
        height:40px;
        width:100%;
        font-size:0;
        margin-bottom: 10px;
        &.primary a{
          background-color: #006b2c15;
          color:#006b2c;
        }
        a{
          display: flex;
          width:100%;
          height:100%;
          padding:0 12px;
          border-radius: 8px;
          align-items: center;
          color:#5F6388;
          transition: all 0.1s ease-in-out;
          &.router-link-active{
            background:#fff;
            // box-shadow: 0px 8px 14px  rgba(62, 107, 224, 0.12);
            color:#006b2c
          }
          p{
            margin-left: 8px;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 0px;
            line-height: 22px;
            text-align: left;
            vertical-align: top;
          }
        }
      }
    }
  }
// }
a.login_tab{
  display: flex;
  width:100%;
  height:100%;
  padding:0 12px;
  border-radius: 8px;
  align-items: center;
  color:#5F6388 ;
  cursor: pointer;
  transition: all 0.1s ease-in-out;
}

.m{
  display: none !important;
}


@media (max-width: 1000px) {
  .m{
    display: flex !important;
  }
  .pc{
    display: none !important;
  }
  .page .mainpage{
    
    .navMenu{
      img{
        height:25px;
        margin-right: 8px;
      }
    }
    .navlist{
      // display: none !important;
      display: flex !important;
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.2s ease,
      visibility 0.2s ease;
      position: fixed;
      z-index: 99;
      top:60px;
      left:0;
      width:100%;
      height:calc(var(--system--height) - 60px);
      flex-wrap: wrap;
      align-content: flex-start;
      background-color: #f8f5f0;
      &>.nav.animate__animated {
        width:fit-content;
        height:60px;
        cursor: pointer;
        &::after{
          top:0;
          left:0;
          width:100%;
          height:100%;
          border-radius: 0;
          // display: none;
          visibility:hidden;
          opacity: 0;
        }
        &.router-link-active{
          // color:rgba(34, 98, 251, 1);
          // background-image: linear-gradient(105deg, #2262fb 20%, #801fff 88.8%);;
          background-image: linear-gradient(125deg, #006b2c 20%, #1a842f 88.8%);;
          background-clip: text;
          -webkit-background-clip: text;
          color: transparent;
        }
      }
      &.show{
        &>.nav.animate__animated.router-link-active::after,
        &>.nav.animate__animated:hover::after{
          opacity: 1;
          visibility: visible;
        }
      }
      
      &>.tabbar{
        padding-top: 0;
        width: 100%;
        border-top:2px solid #5F638855;;
        ul{
          width:100%;
          li{
            height:50px;
            cursor: pointer;
          }
        }
      }
      &.show{
        display: flex !important;
        visibility: visible;
        opacity: 1;
        // justify-content: space-evenly;
        
      }
    }
    .header{
      padding:0 8px !important;
    }
    .navMenu{
      padding: 0 16px;
      height:100%;
      align-items: center;
      display: flex;
    }
    .commonPage{
      padding-top: 8px !important;
      padding-left: 16px;
      padding-right: 16px;
    }
  }
}

html body *.dark{color-scheme:dark;--el-color-primary:#409eff;--el-color-primary-light-3:#3375b9;--el-color-primary-light-5:#2a598a;--el-color-primary-light-7:#213d5b;--el-color-primary-light-8:#1d3043;--el-color-primary-light-9:#18222c;--el-color-primary-dark-2:#66b1ff;--el-color-success:#67c23a;--el-color-success-light-3:#4e8e2f;--el-color-success-light-5:#3e6b27;--el-color-success-light-7:#2d481f;--el-color-success-light-8:#25371c;--el-color-success-light-9:#1c2518;--el-color-success-dark-2:#85ce61;--el-color-warning:#e6a23c;--el-color-warning-light-3:#a77730;--el-color-warning-light-5:#7d5b28;--el-color-warning-light-7:#533f20;--el-color-warning-light-8:#3e301c;--el-color-warning-light-9:#292218;--el-color-warning-dark-2:#ebb563;--el-color-danger:#f56c6c;--el-color-danger-light-3:#b25252;--el-color-danger-light-5:#854040;--el-color-danger-light-7:#582e2e;--el-color-danger-light-8:#412626;--el-color-danger-light-9:#2b1d1d;--el-color-danger-dark-2:#f78989;--el-color-error:#f56c6c;--el-color-error-light-3:#b25252;--el-color-error-light-5:#854040;--el-color-error-light-7:#582e2e;--el-color-error-light-8:#412626;--el-color-error-light-9:#2b1d1d;--el-color-error-dark-2:#f78989;--el-color-info:#909399;--el-color-info-light-3:#6b6d71;--el-color-info-light-5:#525457;--el-color-info-light-7:#393a3c;--el-color-info-light-8:#2d2d2f;--el-color-info-light-9:#202121;--el-color-info-dark-2:#a6a9ad;--el-box-shadow:0px 12px 32px 4px rgba(0,0,0,0.36),0px 8px 20px rgba(0,0,0,0.72);--el-box-shadow-light:0px 0px 12px rgba(0,0,0,0.72);--el-box-shadow-lighter:0px 0px 6px rgba(0,0,0,0.72);--el-box-shadow-dark:0px 16px 48px 16px rgba(0,0,0,0.72),0px 12px 32px #000000,0px 8px 16px -8px #000000;--el-bg-color-page:#0a0a0a;--el-bg-color:#141414;--el-bg-color-overlay:#1d1e1f;--el-text-color-primary:#E5EAF3;--el-text-color-regular:#CFD3DC;--el-text-color-secondary:#A3A6AD;--el-text-color-placeholder:#8D9095;--el-text-color-disabled:#6C6E72;--el-border-color-darker:#636466;--el-border-color-dark:#58585B;--el-border-color:#4C4D4F;--el-border-color-light:#414243;--el-border-color-lighter:#363637;--el-border-color-extra-light:#2B2B2C;--el-fill-color-darker:#424243;--el-fill-color-dark:#39393A;--el-fill-color:#303030;--el-fill-color-light:#262727;--el-fill-color-lighter:#1D1D1D;--el-fill-color-extra-light:#191919;--el-fill-color-blank:transparent;--el-mask-color:rgba(0,0,0,0.8);--el-mask-color-extra-light:rgba(0,0,0,0.3)}html.dark .el-button{--el-button-disabled-text-color:rgba(255,255,255,0.5)}html.dark .el-card{--el-card-bg-color:var(--el-bg-color-overlay)}html.dark .el-empty{--el-empty-fill-color-0:var(--el-color-black);--el-empty-fill-color-1:#4b4b52;--el-empty-fill-color-2:#36383d;--el-empty-fill-color-3:#1e1e20;--el-empty-fill-color-4:#262629;--el-empty-fill-color-5:#202124;--el-empty-fill-color-6:#212224;--el-empty-fill-color-7:#1b1c1f;--el-empty-fill-color-8:#1c1d1f;--el-empty-fill-color-9:#18181a}
